<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>门户大开的JSON风格的模块化</title>
    </head>
    <body>
		<p>javascript代码天生就是散乱的样子。随着浏览器的功能的增强，javascript也开始严肃起来。在复杂的逻辑下，我们会将散乱的代码进行模块化，使用封装的方式将这些模块整理好，只向外面暴露一个可调用的接口。闭包是实现模块封装的关键。</p>
		<p><strong>自执行函数</strong>传入参数可以解决模块内属性暴露的缺点。</p>
		<hr>
		<p>最开始，我以为封装就是<strong>酱紫</strong>的。<em>门户大开</em></p>
		<p>n的值为：<span id="nvalue">0</span></p>
		<button onclick="addValue()">增加</button>
		<button onclick="cutValue()">减少</button>
		<script type="text/javascript">
			var addValue=function(){
				console.log(accounter)
				var addn=accounter.add;
				document.getElementById('nvalue').innerHTML=accounter.n;
			}
			var cutValue=function(){
				var cutn=accounter.cut();
				var cutb=accounter.cut;
				console.log(cutn+"==="+cutb());
				// document.getElementById('nvalue').innerHTML=cutn;
			}



			// 创建一个对象实现自增，自减功能
			// 在accounter中使用了this这个关键字，这种做法会出错。情况：如上cutValue()中使用 cutn==-1   cutb==undefined    这是为什么？this在cut中使用并不是说明n是accounter的私有变量，而是因为调用这个方法的是accounter对象。所以this指向的是accounter如，cutn     但是如果是cutb，因为是直接将方法地址赋给了cutb,cutb是一个全局变量，他的this是指window，window下面没有n这个变量。所以是undefined
			// 已注释部分
			// 
			//  建议：直接使用accounter.n 
			//这种模块化方式，往往用来组织json风格数据，，，而不是程序。    如：json对象，，一些静态数据。
			//  
			// var n=10;
		 	var accounter={
		 		n:0,
		 		add:function(){
		 			//return this.n++;   //先赋值再自增
		 			return ++accounter.n;
		 		},
		 		cut:function(){
		 			//return --this.n;  //先自减再赋值
		 			return --accounter.n;
		 		}
		 	}
			
		</script>

    </body>
</html>